<template>
  <div class="positRel">
    <div class="attention-wrap">
      <div class="title-box" @click="handleClick">社区</div>
      <!-- 左导航 -->
      <div class="attention-content">
        <!-- <Menu active-name="1" width="120px" class="menu" @on-select="select">
          <MenuItem name="1" class="menuItem"> 活动 </MenuItem>
          <MenuItem name="2" class="menuItem"> 我的圈子 </MenuItem>
          <MenuItem name="3" class="menuItem"> 我的话题 </MenuItem>
          <MenuItem name="4" class="menuItem"> 我的收藏 </MenuItem>
          <MenuItem name="5" class="menuItem2"> 草稿箱 </MenuItem>
        </Menu> -->
        <!-- 中间主体 -->
        <div class="menu-item">
          <router-view></router-view>
          <!-- <active v-if="name == 1"></active> -->
          <!-- <mycircle v-if="name == 2"></mycircle>
          <topic v-if="name == 3"></topic>
          <collection v-if="name == 4"></collection>
          <draft v-if="name == 5"></draft> -->
        </div>
        <!-- 右侧边栏 -->
        <div class="content-right">
          <sideright></sideright>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as experts from "@/api/experts.js";
import active from "./active.vue";
import mycircle from "./mycircle.vue";
import topic from "./topic.vue";
import collection from "./collection.vue";
import draft from "./draft.vue";
import sideright from "./sideright.vue";
import {getList}from '../../api/community'
export default {
  components: {
    active,
    mycircle,
    topic,
    collection,
    draft,
    sideright,
  },
  data() {
    return {
      name: 1,
    };
  },
  methods: {
    select(v) {
      this.name = v;
    },
    handleClick() {
      this.$router.push('/follow')
    }
    //

  },
};
</script>

<style lang="scss" scoped>
.positRel {
  width: 100%;
}
.attention-wrap {
  min-height: calc(100vh - (80 / 1920 * 100vw));
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  // padding: 0px calc(360 / 1920 * 100vw);
  padding-bottom: 50px;
  .title-box {
    padding: 18px 0;
  }
  .attention-content {
    // background: #fff;
    position: relative;
    display: flex;
    width: 100%;
    border-radius: calc(5 / 1920 * 100vw);
    .menu {
      background-color: deeppink;
      height: 100%;
      .menuItem,
      .menuItem2 {
        text-align: center;
        height: 60px;
        font-size: 16px;
        color: #fff;
        background-color: deeppink;
      }
      .menuItem {
        border-bottom: 1px solid #f00;
      }
      ::v-deep.ivu-menu-item-active::after {
        display: none;
      }
    }
    .menu-item {
      // background-color: #fff;
      width: 65%;
      margin-left: 5px;
      margin-right: 5px;
      flex: 1;
    }
    .content-right {
      padding: 5px;
      width: 360px;
      height: 100%;
    }
  }
}
::v-deep.ivu-menu-vertical.ivu-menu-light:after {
  display: none;
}
</style>
